<template>
	<view class="container">
		<view class="chooseImg" @click="chooseImg">选择图片</view>
		<view class="imageList">
			<image @click="priview" v-if="imgUrl" :src="imgUrl" mode="aspectFit"></image>
		</view>
		<view v-if="imgUrl" class="inputBox">
			<view class="image-name">图片名称</view>
			<uv-input placeholder="请输入图片名称" border="surround" v-model="title"></uv-input>
		</view>
		<view v-if="imgUrl" class="inputBox">
			<view class="image-name">图片类型</view>
			<uv-input placeholder="请选择图片类型" border="surround" v-model="type" :readonly="true">
				<template #suffix>
					<uv-icon @click="selectImageType" name="arrow-down" size="20"></uv-icon>
				</template>
			</uv-input>
		</view>
		<view v-if="imgUrl" class="chooseImg" @click="uploadImg">上传图片</view>
		<uv-popup ref="popup" @change="changePop" round="24">
			<view class="popbox">
				<view v-for="i in typeList" class="popitem" @click="selectItem(i)">{{ i }}</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl: '',
			title: '',
			type: '',
			typeList: ['风景', '美女'],
			values: false
		};
	},
	methods: {
		selectImageType() {
			this.$refs.popup.open('bottom');
			// 隐藏tabbar
			uni.hideTabBar();
		},
		selectItem(e) {
			this.type = e;
			this.$refs.popup.close();
		},
		changePop(e) {
			if (!e.show) {
				// 显示tabbar
				uni.showTabBar();
			}
		},
		chooseImg() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.imgUrl = res.tempFilePaths[0];

					// 跳转裁剪页面
					// uni.navigateTo({
					// 	url: '/pages/add/caijian' + `?imgurl=${this.imgUrl}`
					// });
				}
			});
		},
		priview() {
			uni.previewImage({
				urls: [this.imgUrl]
			});
		},
		uploadImg() {
			if (this.imgUrl.trim() == '') {
				uni.showToast({
					title: '请选择图片',
					icon: 'none'
				});
				return;
			}
			if (this.title.trim() == '') {
				uni.showToast({
					title: '请输入图片名称',
					icon: 'none'
				});
				return;
			}
			if (this.type.trim() == '') {
				uni.showToast({
					title: '请选择图片类型',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '上传中'
			});
			let path = this.imgUrl;
			let _this = this;
			uniCloud.uploadFile({
				filePath: path,
				cloudPath: 'dmhsq.jpg',
				success: function (res) {
					let url = res.fileID;
					uniCloud
						.callFunction({
							name: 'addImgList',
							data: {
								imgUrl: url,
								title: _this.title,
								type: _this.type
							}
						})
						.then((res) => {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							});
							_this.imgUrl = '';
							_this.title = '';
							_this.type = '';
						});
				},
				fail: function (err) {
					console.log(err);
				},
				complete: function () {
					uni.hideLoading();
				}
			});
		}
	},
	onLoad() {}
};
</script>

<style lang="scss" scoped>
.container {
	.chooseImg {
		height: 90rpx;
		text-align: center;
		margin: 20rpx 40rpx;
		box-sizing: border-box;
		background: royalblue;
		color: white;
		display: grid;
		place-content: center;
		border-radius: 10rpx;
	}
	.inputBox {
		margin: 20rpx 40rpx;
		.image-name {
			color: gray;
			margin-bottom: 20rpx;
		}
	}

	.imageList {
		width: 100vw;
		display: grid;
		place-content: center;
	}
	.popbox {
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		.popitem {
			text-align: center;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid gray;
		}
	}
}
</style>
